<template>
    <div class="evaluate-wrap">
        <!-- 头部 -->
      <div class="tops">
        <div class="tops-left">
            <p class="p1">5.0</p> 
            <p class="p2">综合评分</p>
            <p class="p3">高于周边商家96%</p>
        </div>
        <div class="tops-right">
            <div class="service">
                <span>服务态度</span>
                <van-rate v-model="value1" allow-half void-icon="star" color="#F19D3B" void-color="#eee"  :size="18" :readonly="true"/>
                <span class="score">4.5</span>
            </div>
            <div class="cuisine">
                <span>菜品质量</span>
                <van-rate v-model="value2" allow-half void-icon="star" color="#F19D3B" void-color="#eee" :size="18" :readonly="true"/>
                <span class="score">4.5</span>
            </div>
            <p>送达时间<span class="times">20分钟</span></p>
        </div>
      </div>
      

      <!-- 留言 -->
      <div class="messages">
        <!-- 留白间隔 -->
      <div class="line"></div>
     <van-tabs type="card" @click="handleToggle">
  <van-tab title="全部24">
    <div class="messages-card" v-for="(item,index) in allList" :key="index">
			<img :src="item.avatar" />
		
		<div class="card-content">
			<div class="first">
				<span> {{ item.username}} </span>
				<span> {{ item.rateTime |forMateTime }} </span>
			</div>
			<div class="second">
				<van-rate
					v-model="item.score"
					:size="18"
					color="#ffd21e"
					void-icon="star"
					void-color="#eee"
					allow-half
                    :readonly="true"
				/>
				<span> {{ item.deliveryTime || "30" }}分钟送达 </span>
			</div>
			<div class="third">
				<p>{{item.text}}</p>
			</div>
			<div class="fourth">
				<van-icon name="good-job-o" />
				<div>
					<span v-for="(v, i) in item.recommend" :key="i">
						{{ v }}
					</span>
				</div>
			</div>
		</div>
	</div>
  </van-tab>
  <van-tab title="满意18">
    <div class="messages-card" v-for="(item,index) in satisfaction" :key="index">
			<img :src="item.avatar" />
		
		<div class="card-content">
			<div class="first">
				<span> {{ item.username}} </span>
				<span> {{ item.rateTime }} </span>
			</div>
			<div class="second">
				<van-rate
					v-model="item.score"
					:size="18"
					color="#ffd21e"
					void-icon="star"
					void-color="#eee"
					allow-half
                    :readonly="true"
				/>
				<span> {{ item.deliveryTime || "30" }}分钟送达 </span>
			</div>
			<div class="third">
				<p>{{item.text}}</p>
			</div>
			<div class="fourth">
				<van-icon name="good-job-o" />
				<div>
					<span v-for="(v, i) in item.recommend" :key="i">
						{{ v }}
					</span>
				</div>
			</div>
		</div>
	</div>
  </van-tab>
  <van-tab title="不满意6">
    <div class="messages-card" v-for="(item,index) in dissatisfaction" :key="index">
			<img :src="item.avatar" />
		
		<div class="card-content">
			<div class="first">
				<span> {{ item.username}} </span>
				<span> {{ item.rateTime }} </span>
			</div>
			<div class="second">
				<van-rate
					v-model="item.score"
					:size="18"
					color="#ffd21e"
					void-icon="star"
					void-color="#eee"
					allow-half
                    :readonly="true"
				/>
				<span> {{ item.deliveryTime || "30" }}分钟送达 </span>
			</div>
			<div class="third">
				<p>{{item.text}}</p>
			</div>
			<div class="fourth">
				<van-icon name="good-job-o" />
				<div>
					<span v-for="(v, i) in item.recommend" :key="i">
						{{ v }}
					</span>
				</div>
			</div>
		</div>
	</div>
  </van-tab>
</van-tabs>
        </div>
    </div>
</template>

<script>
import {api_shop_ratings} from '@/apis/shop'

    export default {
        data(){
            return{
                value1:4.5,
                value2:4.5,
                num:24,
                allList:[],
                satisfaction:[],
                dissatisfaction:[]
            }
        },
        created(){
            this.getEvaluate();
        },
        methods:{
           async getEvaluate(){
              const res =await api_shop_ratings();
              if(res.data.errno===0){
                this.allList=res.data.data;
               let satis= res.data.data.filter(function(v){
                  if(v.rateType==0){
                    return v
                  }
                });
                let disnot= res.data.data.filter(function(v){
                  if(v.rateType==1){
                    return v
                  }
                });
                this.satisfaction=satis;
                this.dissatisfaction=disnot
              
              };

            },
            handleToggle(name){
              console.log(name);
            }
        }
    }
</script>

<style lang="scss" scoped>
.evaluate-wrap{
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow-y: scroll;
    &::-webkit-scrollbar {
            width: 0;
        }
    .tops{
       display: flex;
       padding-left: 20px;
       margin: 20px 0;
       .tops-left{
           text-align: center;
           margin-right: 35px;
           &::after{
            display: block;
    content: "";
    height: 74px;
    width: 1px;
    background-color: #f1f2f3;
    position: absolute;
    top: 213px;
    left: 134px;
           }
           .p1{
             color: #F5C444;
             font-weight: bold;
             font-size: 24px;
           }
           .p2{
            margin: 8px 0;
            font-size: 14px;
           }
           .p3{
            font-size: 12px;
            color: #9C9C9B;
           }
       }

       .tops-right{
        font-size: 14px;
         .van-rate{
            margin: 0 10px;
         }
         .cuisine{
            margin: 8px 0;
         }
         .score{
            color: #F5C444;
         }
         .times{
            color: #9C9C9B;
            margin-left: 10px;
         }
       }
           
    }

    .line{
        width: 100%;
    height: 20px;
    background-color: #f4f5f7;
    }

    // 留言
    .messages{
        // padding-top: 20px;
        .van-tabs{
            margin-top: 20px;
        }
        ::v-deep.van-tabs__nav--card .van-tab.van-tab--active{
            color: #181818;
    background-color: #F5C444;
        }
        ::v-deep.van-tabs__nav--card .van-tab{
            color: #F5C444;
    border-right: 1px solid #F5C444;
        }
       ::v-deep.van-tabs__nav--card{
            border: 1px solid #F5C444;
        }
        ::v-deep.van-tabs__nav--card .van-tab:last-child{
            border-right: none;
        }
// 留言
.messages-card {
		padding: 20px 10px;
		border-bottom: 1px solid rgba(128, 128, 128, 0.2);
		display: flex;
       
		img {
			width: 60px;
			height: 60px;
			border-radius: 50%;
		}
		.card-content {
			margin-left: 10px;
			flex: 1;
			.first {
				display: flex;
				justify-content: space-between;

				& span:nth-child(2) {
					color: rgba(128, 128, 128, 0.7);
				}
			}
			.second {
			    margin: 8px 0;
				span {
					margin-left: 20px;
					font-size: 14px;
					color: rgba(128, 128, 128, 0.7);
				}
			}
			.third {
				p {
					font-size: 14px;
				}
			}
			.fourth {
				display: flex;
				
                margin-top: 15px;
				.van-icon {
          color: rgb(255, 195, 0);
    font-size: 30px;
				}
				div {
					margin-left: 10px;
					display: flex;
					flex-wrap: wrap;
					span {
						border: 1px solid rgba(128, 128, 128, 0.5);
						padding: 3px;
						color: rgba(128, 128, 128, 0.7);
						font-size: 12px;
						margin: 2px;
					}
				}
			}
		}
	}


    }
}
</style>